<template>
  <div class="pr-dictionaries">
    <div class="pr-dictionaries-head">
      <el-input v-model="input" placeholder="菜单名称" />
      <el-input v-model="input" placeholder="层级" />
      <el-button @click="query">查询</el-button>
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <div>
      <el-table :data="tableData" border fit stripe highlight-current-row>
        <el-table-column
          v-for="item in tableHead"
          :key="item.id"
          :label="item.label"
          :prop="item.title"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div v-if="item.title == 'isMenu'">
              {{ scope.row[item.title]?'是':'不是' }}
            </div>
            <div v-else>
              {{ scope.row[item.title] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="amend(scope)">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteS(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="30"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 修改弹框 -->
    <el-dialog title="修改部门" :close-on-click-modal="false" :visible.sync="amendVisible" width="20%">
      <amend-dialog :row="row" @chang="amendDialogChang" />
    </el-dialog>

    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="deleteSVisible" :close-on-click-modal="false" width="20%">
      <span>是否确认删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteSVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteSAffirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AmendDialog from './components/amend.vue'
export default {
  components: {
    AmendDialog
  },
  data() {
    return {
      row: {},

      list: null,
      listLoading: false,
      state: '',
      input: '',
      amendVisible: false, // 修改弹框显示隐藏
      deleteSVisible: false, // 删除弹框显示隐藏
      currentPage: 4,

      tableHead: [{
        id: 1,
        label: '菜单名称',
        title: 'name'
      },
      {
        id: 2,
        label: '菜单编号',
        title: 'menu'
      },
      {
        id: 3,
        label: '菜单父编号',
        title: 'code'
      },
      {
        id: 4,
        label: '请求地址',
        title: 'url'
      },
      {
        id: 5,
        label: '排序',
        title: 'sort'
      },
      {
        id: 6,
        label: '层级',
        title: 'tier'
      },
      {
        id: 7,
        label: '是否是菜单',
        title: 'isMenu'
      },
      {
        id: 8,
        label: '状态',
        title: 'state'
      }

      ],
      tableData: [{
        name: '系统管理',
        id: '460000197812162492',
        menu: 'mar_add',
        code: 'mar',
        url: '/mar/load',
        sort: 3,
        tier: 3,
        isMenu: true,
        state: '启用'
      },
      {
        name: '用户管理',
        id: '460000197812162422',
        menu: 'mar_add',
        code: 'mar',
        url: '/mar/load',
        sort: 8,
        tier: 8,
        isMenu: true,
        state: '启用'
      },
      {
        name: '添加用户',
        id: '460000197812162492',
        menu: 'mar_type',
        code: 'mar',
        url: '/mar/type',
        sort: 31,
        tier: 31,
        isMenu: true,
        state: '启用'
      }
      ]
    }
  },
  created() {
    // 获取导航菜单
    this.getSysMenuSelect()
  },
  methods: {
    getSysMenuSelect: function() {
      const params = {}
      this.$server.getSysMenuSelect(params).then(res => {
        console.log(res)
      })
    },

    // 查询
    query() {

    },
    // 新增
    add() {
      this.amendVisible = true
    },
    // 表格多选
    handleSelectionChange(e) {
      console.log(e)
    },
    // 修改
    amend(e) {
      this.row = e
      console.log('修改')
      this.amendVisible = true
    },
    // 确认修改
    amendDialogChang(e) {
      this.amendVisible = false
      if (e.flag) {
        console.log(e.flag)
      } else {
        console.log(e.flag)
      }
    },
    // 删除
    deleteS(e) {
      this.row = e
      console.log('删除')
      this.deleteSVisible = true
    },
    // 确认删除
    deleteSAffirm() {
      this.deleteSVisible = false
      console.log('确认删除')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scope>
  .pr-dictionaries {
    &-head {
      display: flex;
      padding: 20px;

      >div {
        margin-right: 20px;
      }

      .el-cascader {
        width: 200px;
      }

      .el-input {
        width: 200px;
      }
    }
  }

  .pr-dialog-assignRoles {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-pagination {
    margin-top: 20px;
  }
</style>
